<template>
    <div class="container_excel" @click="downExcel">
        <i class="el-icon-download"></i>
        <span class="export">导出excel</span>
        <a ref="down" :href="href" :download="`${title}.xlsx`"></a>
    </div>
</template>

<script>
  // 该组件使用了xlsx第三方库(sheetJS/JS-XLSX)
  import XLSX from 'xlsx'
  export default {
    name: 'exportAsExcel',
    props: {
      tableData: {
        type: Array,
        default:()=>[]
      },
      title: {
        type: String,
        default: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
      }
    },
    data () {
      return {

        href: undefined
      }
    },
    watch: {
      href (val) {
        if (val) {
          setTimeout(_ => {
            this.$refs.down.click()
          }, 1000)
        }
      }
    },
    computed: {
      excelData () {
        // return this.data
        let baseName = [["序号", "姓名"]];
        let baseKey = ['index', 'name'];
        /**
         * tableData 表格数据，
         * 如时间需要特别处理时，比如转时分秒之类的
         * 可在mounted/created获取数据时 对其进行加工。
         * 最后返回一个新数组。
         */
        if (this.tableData.length !== 0) {
          [...this.tableData].splice(0).forEach(o => {
            let oneData = [];
            baseKey.forEach((item, index, arr) => {
              oneData.push(o[item]);
            });
            baseName.push(oneData);
          });
        }
        return baseName;
      }


    },
    methods: {
      downExcel (ev) {
        //  下载excel
        if (ev.target === this.$refs.down) return //  如果是点击的a标签则取消
        if (!this.excelData) return this.$notify.info('没有可以下载的信息')
        let worksheet = XLSX.utils.aoa_to_sheet(this.excelData)
        // 创建工作簿
        let newWorkbook = XLSX.utils.book_new()
        // 将工作表附加到工作簿
        XLSX.utils.book_append_sheet(newWorkbook, worksheet, 'SheetJS')

        // 写入数据
        let s = XLSX.write(newWorkbook, { type: 'binary' })
        let tmpDown = new Blob([this.s2ab(s)], { type: '' })

        this.href = URL.createObjectURL(tmpDown)
        setTimeout(() => {
          // 延时释放
          URL.revokeObjectURL(tmpDown)
        }, 5000)
      },

      s2ab (s) {
        //  字符串转字符流
        var buf = new ArrayBuffer(s.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
      },
      // 暂时用不到
      getCharCol (n) {
        // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
        let s = ''
        let m = 0
        while (n > 0) {
          m = n % 26 + 1
          s = String.fromCharCode(m + 64) + s
          n = (n - m) / 26
        }
        return s
      }
    },
  }
</script>

<style>
    .download {
        display: none;
    }

    .container_excel {
        background-color: #409EFF;
        color: #fff;
        font-size: 14px;
        margin-left: 20px;
        cursor: pointer;
        border: 1px solid #409EFF;
        width: 100px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        padding-left: 5px;
        display: inline-block;
    }
    .container_excel:hover {
        color: #fff;
        background-color: #66b1ff;
    }
    .export {
        margin-left: 8px;
    }
</style>
